<template>
	<view class="container">


		<l-painter custom-style="position: fixed; top:10px; left: 500%;" isCanvasToTempFilePath @success="posterSuccess" :board="poster" />
		<uv-image width="750rpx" height="100vh" class="image" v-if="canvasUrl" :src='canvasUrl'></uv-image>
	</view>
</template>

<script lang="ts" setup>
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { http, apiPath } from '@/common/http/index';

	const [poster, qrcode, id,phone,name,canvasUrl] = [ref(), ref(), ref(), ref(), ref(), ref()]

	onLoad((e) => {
		id.value = e.id
		get_info()
	});
	
	const posterSuccess = (e)=>{
		canvasUrl.value = e
	}
	//获取背景图
	const get_info = async () => {
		qrcode.value = imgUrl((await http.get(`/api/v1/qrcode?scene=${id.value}`)).data);//获取左侧菜单
		const info  = (await http.get('/api/v1/user/info')).data;//获取左侧菜单
		phone.value = info.account
		name.value = info.name
		poster.value = {
			css: {
				// 根节点若无尺寸，自动获取父级节点
				width: '750rpx',
				padding: '40rpx',
				background: "#31c0ed"
			},
			views: [

				{
					type: "view",
					css: {
						height: "30rpx",
						display: "block"
					},
				},
				{
					type: 'text',
					text: '我的二维码',
					css: {
						fontSize: '40rpx',
						color: '#fff',
						display: "block"
					}
				},

				{
					type: "view",
					css: {
						height: "30rpx",
						display: "block"
					},
				},
				{
					type: 'text',
					text: '长按识别图中二维码，加我好友',
					css: {
						fontSize: '28rpx',
						color: '#fff',
						display: "block"
					}
				},
				{
					type: "view",
					css: {
						height: "70rpx",
						display: "block"
					},
				},
				{
					src: "/static/img/bg04.png",
					type: "image",
					css: {
						width: "670rpx",
						height: "720rpx",
						display: "block",

					},
					views: [{
						css: {
							padding: '250rpx 185rpx',
							textAlign: 'center',
						},
						views: [
							{
								src: qrcode.value,
								type: "image",
								css: {
									width: "300rpx",
									height: "300rpx",
									display: "block"
								},
							},
							{
								type: "view",
								css: {
									height: "60rpx",
									display: "block"
								},
							},
							{
								type: 'text',
								text: '懒学青年-小懒儿',
								css: {
									fontSize: '28rpx',
									color: '#333',
									textAlign: 'center',
								}
							},
						]
					},
					]
				},
				{
					type: "view",
					css: {
						height: "70rpx",
						display: "block"
					},
				},
				{
					views: [{
						css: {
							padding: '0 185rpx',
						},
						views: [
							{
								src: "/static/img/logo.png",
								type: "image",
								css: {
									width: "100rpx",
									height: "100rpx",
									margin:'0 30rpx 0 0'
								},
							},
							{
								type: 'text',
								text: '懒学青年',
								css: {
									fontSize: '40rpx',
									color: '#fff',
									lineHeight: '100rpx',
								}
							},
						]
					},
					]
				},
				{
					type: "view",
					css: {
						height: "70rpx",
						display: "block"
					},
				},
				{
					views: [{
						css: {
							padding: '0 220rpx',
						},
						views: [
							{
								src: "/static/img/phone.png",
								type: "image",
								css: {
									width: "32rpx",
									height: "32rpx",
									margin:'0 10rpx 0 0'
								},
							},
							{
								type: 'text',
								text:  phone.value,
								css: {
									fontSize: '28rpx',
									color: '#fff',
									lineHeight: '32rpx',
								}
							},
						]
					},
					]
				},
				{
					type: "view",
					css: {
						height: "30rpx",
						display: "block"
					},
				},
				{
					type: 'text',
					text: name.value,
					css: {
						fontSize: '28rpx',
						color: '#fff',
						textAlign: 'center',
						width:'100%',
						display: "block"
					}
				},
				{
					type: "view",
					css: {
						height: "70rpx",
						display: "block"
					},
				},
			]
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background:#31c0ed;
		height:100vh;
		// background-image: url('@/static/img/bgs.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// padding: 90rpx 60rpx 100rpx;
	}

	.h2Ttl {
		margin-bottom: 30rpx;
		font-size: 40rpx;
		color: rgba(255, 255, 255, 1);
	}

	.text01 {
		margin-bottom: 90rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
	}

	.bgImg {
		margin: 0 auto;
		width: 630rpx;
		height: 680rpx;
		position: relative;
	}

	.bgImg .codeImg {
		position: absolute;
		left: 50%;
		margin-left: -140rpx;
		top: 250rpx;
	}

	.bgImg .text02 {
		margin-top: 15rpx;
		display: block;
		font-size: 28rpx;
		text-align: center;
	}

	.logoImg {
		margin: 30rpx 0 10rpx;
		text-align: center;
	}

	.telBox {
		color: #fff;
		font-size: 32rpx;
		margin: 0 auto;
		width: 48%;
	}

	.txtName {
		text-align: center;
		margin-top: 10rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>